<template>
  <div class="menu">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="approvalTypeList">审批类型列表</el-menu-item>
      <el-menu-item index="addApprovalType">添加审批类型</el-menu-item>
    </el-menu>
  </div>
  <div class="container">
    <!-- 使用动态组件来切换子组件 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import ApprovalTypeList from "./ApprovalTypeList.vue";
import AddApprovalType from "./AddApprovalType.vue";

// 定义当前激活的组件
const currentComponent = ref(ApprovalTypeList);

// 处理菜单选择事件
const handleSelect = (key: string) => {
  if (key === "approvalTypeList") {
    currentComponent.value = ApprovalTypeList;
  } else if (key === "addApprovalType") {
    currentComponent.value = AddApprovalType;
  }
};

// 定义默认激活的菜单项
const activeIndex = ref("approvalTypeList");
</script>

<style scope>
/* 样式可以根据需要添加 */
.container {
  display: flex;
  flex-direction: row;
  height: 75vh;
  width: 100%;
  /* background-color: pink; */
}
</style>